<template>
   <div>
    <category :scene="scene"></category>
      <el-card style='margin:10px 0px'>
         <!-- 场景1 -->
         <div v-show="scene==0">
            <el-button type="primary" :icon="Plus" :disabled="useCategoryStore.c3Id?false:true" @click="addSpu">添加SPU</el-button>
            <el-table border style="margin:10px 0" :data="SpuList">
               <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
               <el-table-column label="SPU名称"  prop="spuName"></el-table-column>
               <el-table-column label="SPU描述" prop="description" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column label="操作" >
                  <template #="{row,$index}">
                     <el-button type="primary" :icon="Plus" size="small"  title="添加SKU" @click="addSku(row)"></el-button>
                     <el-button type="warning" :icon="Edit" size="small"  title="修改SPU" @click="updateSPu(row)"></el-button>
                     <el-button type="info" :icon="InfoFilled" size="small" title="查看SKU" @click="readSku(row)"></el-button>
              
                        <el-popconfirm
                          confirm-button-text="确认"
                          cancel-button-text="取消"
                          :icon="InfoFilled"
                          icon-color="#626AEF"
                          :title="`你确定要删除${row.spuName}?`"
                          @confirm="deleteSpu(row.id)"
                        
                        >
                          <template #reference>
                           <el-button type="danger" :icon="Delete" size="small" title="删除SPU"></el-button>
                          </template>
                        </el-popconfirm>
                     
         
                  </template>
                  
               </el-table-column>
            </el-table>
            <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[3 , 5, 7, 9]"
            :small="false"
            :disabled="false"
            :background="true"
            layout=",prev, pager, next, jumper,->,sizes, total"
            :total="total"
            @current-change="getProductList"
            @size-change="getProductList"
        
          />
          <el-dialog v-model="dialogVisible" title="展示SKU列表" width="50%" draggable>
            <el-table border :data="skuList">
               <el-table-column label="sku名称" prop="skuName"></el-table-column>
               <el-table-column label="sku价格" prop="price"></el-table-column>
               <el-table-column label="sku重量" prop="weight"></el-table-column>
               <el-table-column label="sku图片">
                  <template #="{row,$index}">
                   <img :src="row.skuDefaultImg"  style="width:100px;height:100px">


                  </template>
               </el-table-column>
            </el-table>
            <template #footer>
              <span class="dialog-footer">
            
              </span>
            </template>
          </el-dialog>

         </div>
         <!-- 场景2 -->
         <div v-show="scene==1">
            <spuSon @spuCancel="spuCancel" ref="spuRef"></spuSon>


         </div>
         <!-- 场景3 -->
         <div v-show="scene==2" >
            <skuSon @skuCancel="skuCancel" ref="skuRef"></skuSon>

         </div>
     
   </el-card>

   </div>
</template>

<script setup lang="ts">
import {Edit,Delete,Plus,Checked,InfoFilled} from '@element-plus/icons-vue';
import {reactive, ref,watch} from  'vue'
import useCategory from '../../../stores/category';
import {reqProductList,reqDeleteSpu,reqSkuList} from  '../../../api/product/spu/index'
import skuSon from './skuSon/index.vue'
import spuSon  from './spuSon/index.vue'
import { ElMessage } from 'element-plus';

const  useCategoryStore=useCategory()

const  currentPage=ref(1)
const pageSize=ref(3)
const scene=ref(0)
const SpuList=ref<any>([])
const total=ref(10)
const  spuRef=ref()
const dialogVisible=ref(false)
const skuList=ref([])
const skuRef=ref()

watch([()=>useCategoryStore.c3Id], ()=>{
    SpuList.value=[]
   if(!useCategoryStore.c3Id) return
   getProductList()

   
})
// 获取SPu产品列表
const getProductList= async()=>{
   let res:any=await  reqProductList(currentPage.value,pageSize.value,useCategoryStore.c3Id)
   SpuList.value=res.records
   total.value=res.total
}
// 添加Spu
const  addSpu=()=>{

  

   
     spuRef.value[2](useCategoryStore.c3Id)
     

    scene.value=1

}
// 修改SPu // 父组件点击修改触发子组件的回调 发请求
const updateSPu=(row:any)=>{
    spuRef.value[0](row)
 
   
   scene.value=1
}
// 子组件 取消按钮 Spu  和保存触发的 回调
const spuCancel=({scene1,flag}:any)=>{
  
   
   
  scene.value=scene1
  if(flag=='update'){
      getProductList()

   }else{
      currentPage.value=1
      getProductList()
   }
 
   

}
// 添加Sku
const addSku=(row:any)=>{
    skuRef.value.initSku(useCategoryStore.c1Id,useCategoryStore.c2Id,useCategoryStore.c3Id,row)
  
  
   
   
   scene.value=2

}
// sku取消按钮触发的回调
const skuCancel=(val:number)=>{
 
   
   scene.value=val
   getProductList()


}
// 删除spu
const deleteSpu=async(id:number)=>{
  await reqDeleteSpu(id)
 ElMessage({
   type:'success',
   message:'删除成功'
 })
 getProductList()
}
// 查看SKU
const readSku= async(row:any)=>{
   try {
      let res:any= await  reqSkuList(row.id)
      skuList.value=res
      
   dialogVisible.value=true
   } catch (error) {
      
      
   }

   

}

</script>

<style scoped>

</style>